import React from 'react'
import { Link, NavContent } from '../../ui-components'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as UserAction from '../../actions/user.action'
import * as PersonalAction from '../../actions/personal.action'
import { fetchProfile, updateAvatar, fetchAddresses } from '../../actions/app.action'
import { createDocument } from '../../actions/onboarding.hr.action'
import { fileUpload } from '../../actions/file.action'

export default
@connect(({}) => ({}), dispatch => ({ actions: bindActionCreators({ ...PersonalAction, ...UserAction, fetchAddresses, updateAvatar, createDocument, fileUpload, fetchProfile }, dispatch) }))
class extends React.Component {

	static contextTypes = {
		router: React.PropTypes.object
	}

	item({label, name, active}) {
		return (
			<Link 
        size="16"
				to={`#/personal/${name}`}
				label={label} 
				active={~this.props.location.pathname.indexOf(name) && active}/>
		)
	}

	render() {
		const navs = [[
			{
				label: '个人信息', name: 'basic'
			},
			{
				label: '提醒设置', name: 'remind'
			},
			{
				label: '帐号密码设置', name: 'account'
			}
		]]
		return (
			<NavContent
				navs={navs}
				item={::this.item}
			>
				{
					React.Children.map(this.props.children, child => React.cloneElement(child, {
						...this.props.actions,
            ...this.context
					}))
				}
			</NavContent>
		)
	}
}
